<template>
	<span :class="getClass">
		<Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
	</span>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import Icon from '#/Icon/src/Icon.vue';
import { useDesign } from '@/hooks/web/useDesign';

export default defineComponent({
	name: 'BasicArrow',
	components: { Icon },
	props: {
		/**
		 * Arrow expand state
		 */
		expand: { type: Boolean },
		/**
		 * Arrow up by default
		 */
		up: { type: Boolean },
		/**
		 * Arrow down by default
		 */
		down: { type: Boolean },
		/**
		 * Cancel padding/margin for inline
		 */
		inset: { type: Boolean },
	},
	setup(props) {
		const { prefixCls } = useDesign('basic-arrow');

		// get component class
		const getClass = computed(() => {
			const { expand, up, down, inset } = props;
			return [
				prefixCls,
				{
					[`${prefixCls}--active`]: expand,
					up,
					inset,
					down,
				},
			];
		});
		return {
			prefixCls,
			getClass,
		};
	},
});
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-basic-arrow';

.@{prefix-cls} {
	display: inline-block;
	cursor: pointer;
	transform: rotate(0deg);
	transition: all 0.3s ease 0.1s;
	transform-origin: center center;

	&--active {
		transform: rotate(90deg);
	}

	&.inset {
		line-height: 0px;
	}

	&.up {
		transform: rotate(-90deg);
	}

	&.down {
		transform: rotate(90deg);
	}

	&.up.@{prefix-cls}--active {
		transform: rotate(90deg);
	}

	&.down.@{prefix-cls}--active {
		transform: rotate(-90deg);
	}
}
</style>
